<template>
    <div class="markdown-content" v-html="renderedContent"></div>
</template>
  
<script setup lang="ts">
import { computed } from 'vue';
import DOMPurify from 'dompurify';
import { marked } from 'marked';

const props = defineProps<{
    content: string;
}>();

// 使用 marked 解析 Markdown，再用 DOMPurify 净化 HTML
const renderedContent = computed(() => {
    if (!props.content) return '';
    const html = marked.parse(props.content);
    return DOMPurify.sanitize(html);
});
</script>
  
<style scoped>
.markdown-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
}

.markdown-content {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

.markdown-content pre {
    background: #f6f8fa;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
}

.markdown-content code {
    background: #f6f8fa;
    padding: 2px 4px;
    border-radius: 4px;
}
</style>